<template lang="html">
  <div class="">
    <div class="panel-heading">
				<h3 class="panel-title">ToList {{total}}</h3>
		</div>
	  <div class="panel-body">
			<ul class="list-group">
				<li v-bind:class="{done:item.completed}" v-for="(item,index) in todos" class="list-group-item">{{item.title}}  {{item.completed}}
					<button :class="item.completed?'btn-danger':'btn-success'" class="btn pull-right btn-xs" @click="toggleState(index)">{{item.completed?'已完成':'完成'}}</button>
					<button class="btn btn-info btn-xs pull-right" @click='deleteitem(index)'>删除</button>
				</li>
			 </ul>
			 <input type="text" class="form-control" v-model="newData.title" />
			 <button @click="addNews(newData)" class="btn btn-success">添加</button>
		</div>
		<div class="panel-footer"></div>
  </div>
</template>

<script>
export default {
  data(){
			return {
        newData: {
  					id: null,
  					title: '',
  					completed: false
  				},
  				todos: [{
  					id: 1,
  					title: '去吃饭',
  					completed: false
  				}, {
  					id: 2,
  					title: '打篮球',
  					completed: false
  				}, {
  					id: 3,
  					title: '踢足球',
  					completed: false
  					}, {
  						id: 4,
  						title: '敲代码',
  						completed: false
  					}, {
  						id: 5,
  						title: '去睡觉',
  						completed: false
  					}, {
  						id: 6,
  						title: '打瞌睡',
  						completed: false
  					}]
          }
				},
				methods: {
					addNews(data) {
						this.todos.push(data);
						this.newData = {
							id: null,
							title: '',
						};
					},
					toggleState(index) {
						console.log("46561");
						this.todos[index].completed = !this.todos[index].completed;
					},
					deleteitem(index){
						this.todos.splice(index,1)
					}
				},
				computed: {
					total() {
						return this.todos.length;
					}
				}
}
</script>

<style lang="css">
</style>
